<script setup lang="ts">
import {onMounted, onUnmounted, useTemplateRef} from 'vue';
import * as echarts from 'echarts';

const boxRef = useTemplateRef<HTMLElement>('boxRef');
let chart1: echarts.ECharts;
const initChart1 = () => {
  chart1?.dispose();
  chart1 = echarts.init(boxRef.value!);
  onUnmounted(() => {
    chart1.dispose();
  });
};
// 临时转成时间戳给 ECharts 用（不改 data 常量）

const updateChart = () => {
  const data = [
    ['2000-06-05', 116],
    ['2000-06-06', 129],
    ['2000-06-07', 135],
    ['2000-06-08', 86],
    ['2000-06-09', 73],
    ['2000-06-10', 85],
    ['2000-06-11', 73],
    ['2000-06-12', 68],
    ['2000-06-13', 92],
    ['2000-06-14', 130],
    ['2000-06-15', 245],
    ['2000-06-16', 139],
    ['2000-06-17', 115],
    ['2000-06-18', 111],
    ['2000-06-19', 309],
    ['2000-06-20', 206],
    ['2000-06-21', 137],
    ['2000-06-22', 128],
    ['2000-06-23', 85],
    ['2000-06-24', 94],
    ['2000-06-25', 71],
    ['2000-06-26', 106],
    ['2000-06-27', 84],
    ['2000-06-28', 93],
    ['2000-06-30', 73],
    ['2000-07-01', 83],
    ['2000-07-02', 125],
    ['2000-07-03', 107],
    ['2000-07-07', 106],
    ['2000-07-08', 107],
  ] as [string,number][];
  const option: echarts.EChartsOption = {
    title: [
      {
        left: 'center',
        text: 'Gradient along the y axis',
      },
    ],
    tooltip: {
      trigger: 'axis',
    },
    dataZoom: [
      {
        type: 'inside',
      },
    ],
    grid: {
      containLabel: true,
    },
    yAxis: {
      type: 'value',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.map((item) => item[0]),
      axisLabel: {
        showMinLabel: true,
        showMaxLabel: true,
      },
    },
    series: [{type: 'line', data}],
  };
  chart1!.setOption(option);
};

onMounted(() => {
  initChart1();
  updateChart();
});
</script>

<template>
  <div ref="boxRef" class="chart"/>
</template>

<style lang="scss" scoped>
.chart {
  height: 300px;
}
</style>
